 <template>
  <div class="bg_page">
    <header-bar :title="pageName || '获取中...'"  :interceptReturn="true" @return="goBack"></header-bar>
    <pull-refresh :bottom="panelBottom" ref="pullRefreshPanel" id="scrollPanel" :background-color="'#f6f6f6'" :top="headerHeight" :enableRefresh="true" @refresh="refreshData">
      <div class="top_block">
        <div class="conferenceHall_img">
            <img :src="bannerImg" alt="">
        </div>
      </div>

      <div class="bottom_block">
        <div class="goods_list_block">
          <goods-list :list="goodsListData"></goods-list>
        </div>
        <div class="no_data_block" v-if="goodsListData.length == 0 && !isLoading">
          <no-data-panel></no-data-panel>
        </div>
        <div>
          <infinite-load v-if="goodsListData.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
        </div>
      </div>
    </pull-refresh>
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue"
import PullRefresh from "@/components/pullRefresh.vue";
import infiniteLoad from '@/components/infiniteLoad.vue';
import goodsList from '@/views/common/goodsList/goodsList.vue';
import {mapState,mapActions} from 'vuex';
import native from '@/libs/native/index';
export default {
  props: {
   
  },
  components:{
    HeaderBar,
    PullRefresh,
    infiniteLoad,
    goodsList
  },
  mounted() {

  },
  data() {
    return {
      panelBottom:0,
      scrollTarget: '#scrollPanel',
      isLoading: false,
      isNomre: false,
      tipsShow: false,
      goodsListData:[],
      currentPage:1,
      code:'',
      bannerImg:'',
      pageName:''
    }
  },
  computed: mapState({
    headerHeight: state => state.headerHeight,
  }),
  created() {
    this.code = this.$route.query.code;
    this.getNaviTemplateInfo();
  },
  filters:{
    amountFormat(value,flag) {
    	if (!value) return;
    	value = value*1;
    	let result;
    	if(flag){
    		value = value.toFixed(0);
    	}else{
    		value = value.toFixed(2);
    	}
      result = value.replace(/\B(?=(\d{3})+\b)/g,',');
      return result;
    }
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getNaviTemplateInfo(done){
      if(!done && this.currentPage == 1){
        this.toggleLoading({flag:true});
        this.isLoading = true;
      }
      this.$ajax.getNaviTemplateInfo({
        queryBody:{
          code:this.code
        },
        page:{
          size:10,
          current:this.currentPage
        }
      }).then((res)=>{
        this.toggleLoading({flag:false});
        if(this.isLoading){
          this.isLoading = false;
        };
        if(res.code == '0000'){
          if(!this.bannerImg || done){
            this.pageName = res.data.name || '品质会场';
            document.title = res.data.name || '品质会场';
            this.bannerImg = res.data.imgUrl;
          }
          if(!this.tipsShow){
            this.tipsShow = true;
          };
          if(res.data.page.records.length < 10){
            this.isNomre = true;
          }
          if(done){
            done();
          };
          if(this.currentPage == 1){
            this.goodsListData = res.data.page.records;
          }else{
            this.goodsListData = [...this.goodsListData,...res.data.page.records];
          }
        };
      });
    },
    refreshData(done){
      this.isLoading = false;
      this.isNomre =  false;
      this.tipsShow = false;
      this.currentPage = 1;
      this.getNaviTemplateInfo(done)
    },
    getNextData(){
      this.isLoading = true;
      this.currentPage++;
      this.getNaviTemplateInfo()
    },
    
    goBack(){
      let originType = this.$route.query.originType;
      if(originType == 'h5'){
        this.$router.go(-1);
      }else{
        native.closeWebPage();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bg_page{
  min-height: 100%;
}

.top_block{
  min-height: 2rem;
  .conferenceHall_img{
    width: 100%;
    height: auto;
  }
}
.bottom_block{
  width: 100%;
}
.goods_list_block{
  padding: 0.2rem 0 0.2rem 0.2rem;
  background-color: #f6f6f6;
}
.no_data_block{
  padding-top: 1.6rem;
}
</style>
